@import "./../common/center";
#nav{
    background-color:#f5f5f5;
    height: 35px;
    width: 100%;
    border-bottom: 1px solid #eee;
    line-height: 35px;
}
#nav .nav{
    @include type_area;
    display: flex;
    justify-content: space-between;
}
#nav .nav li{
    width: 70px;
}
#nav .nav .login{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#nav .nav .nav-left .left-container{
    width: 400px;
    display: flex;
    justify-content: space-between;
}
#nav .nav .nav-left .left-container li .top{
    width: 100%;
    display: flex;
    justify-content: center;
}
#nav .nav .nav-left .left-container>li.active{
    background-color: #fff;
}
#nav .nav .nav-left .left-container li p:hover{
    color: #ff6600;
   
}
#nav .nav .nav-left .left-container li p:hover+i{
    display: block;
    transform: rotate(180deg);
}
#nav .nav .nav-left .left-container>li:nth-of-type(1){
    width: 80px;
    height: 36px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}
#nav .nav .nav-left .left-container>li:nth-of-type(2){
    width: 80px;
    height: 36px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}
#nav .nav .nav-left .left-container>li:nth-of-type(3){
    width: 80px;
    height: 36px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}
#nav .nav .nav-left .left-container>li:nth-of-type(4){
    width: 80px;
    height: 36px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
#nav .nav .nav-left .left-container>li:nth-of-type(5){
    width: 80px;
    height: 36px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}
#nav .nav .nav-left .left-container li .top-menu{
    background-color: #fff;
    z-index: 999;
}
#nav .nav .nav-left .left-container li:nth-of-type(1) .top-menu{
    width: 800px;
    position: absolute;
    left: 0;
    top: 36px;
    display: none;
}
#nav .nav .nav-left .left-container li:nth-of-type(2) .top-menu{
    width: 100px;
    position: absolute;
    left: 0;
    top: 36px;
    display: none;
}
#nav .nav .nav-left .left-container li:nth-of-type(3) .top-menu{
    width: 100px;
    position: absolute;
    left: 0;
    top: 36px;
    display: none;
}
#nav .nav .nav-left .left-container li:nth-of-type(5) .top-menu{
    width: 100px;
    position: absolute;
    left: 0;
    top: 36px;
    display: none;
}
#nav .nav .nav-left .left-container li:nth-of-type(5) i:nth-of-type(1){
    margin-right: 0;
}
/*  nav-right  */
#nav .nav .nav-right{
    width: 648px;
    height: 35px;
}
#nav .nav .nav-right .right-container{
    display: flex;
    justify-content: space-between;
}
#nav .nav .nav-right .right-container .top{
    display: flex;
    justify-content: center;
}
#nav .nav .nav-right .right-container .top:hover{
    color: #ff6600;
}
#nav .nav .nav-right .right-container .top:hover i{
    transform: rotate(180deg);
}
#nav .nav .nav-right .right-container .active{
    background-color: #fff;
}
#nav .nav .nav-right .right-container .top-menu{
    display: none;
}